<template>
  <div>
    <composition-api></composition-api>
    <OptionsApi></OptionsApi>
    <TodoList></TodoList>
    <!-- vue2  v-for优先级 比 v-if更高 -->
    <!-- vue3 v-if优先级 比 v-for更高 -->
    <!-- -->
    <template  v-for="i in 5">
      <!-- vue2  v-on:keydown.13="xxx" vue3 不支持 v-on:keydown.13='xx' -->
      <!-- v-model.number  v-model.trim 表单数据绑定修饰符 -->
      <h5 v-on:keydown.ctrl.enter="a=10" v-if="i%2==1">
        标题{{i}}
      </h5>
   </template>
  </div>
</template>

<script>
  import CompositionApi from './components/CompositionApi.vue'
  import OptionsApi from './components/OptionsApi.vue'
  import TodoList from './components/todolist/TodoList.vue'
  export default {
      components:{
        CompositionApi,
        OptionsApi,
        TodoList
      }
  }
</script>

<style lang="scss" scoped>

</style>